<template>
  <!-- 基本表单验证
      1：表单元素值的绑定（值要放到一个对象中）
      2：el-form
           :model="表单元素值的对象"
           :rules:表单验证的规则
            :rules={
               prop的值:[
               {required:true,message:'错误信息',trigger:'blur/change'},
               {min:最小长度,max:最大长度,message:'错误信息',trigger:'blur/change'},
               {pattern:正则,message:'错误信息',trigger:'blur/change'}
               ]

            }
      3:el-form-item
           prop="表单元素值的字段名"

    全局表单验证
      1：已完成基本表单验证
      2：el-form  ref='form'
      3:调用el-form组件内的validate((result)=>{ result:true/false  })

 -->
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="请输入用户名" prefix-icon="el-icon-lock" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="btn" @click="submit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '必填', trigger: 'change' },
          { pattern: /^1[3-9]\d{9}$/, message: '请正确输入手机号', trigger: 'change' }
        ],
        password: [
          { required: true, message: '必填', trigger: 'change' },
          { min: 6, max: 12, message: '请输入6-12位密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((result) => {
        console.log(result)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// scoped:只管当前组件和子组件的最外层
::v-deep .el-input--prefix .el-input__inner{
  height:50px;
  background-color: #d3e4ff;
}
.btn{
  width:100%;
  height:60px;
  font-size: 24px;
}
</style>
